<template>
  <div class="modal-box">
    <input class="modal-in" type="text" placeholder="---请选择---" @click="selShow = !selShow" :value="val" readonly/>
    <div class="icon"></div>
    <select-list v-show="selShow" :list2="list" v-on:receive="changeVal"></select-list>
  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
    name: 'Select',
    props: ['list'],
    data() {
      return {
        val: '',
        selShow: false
      }
    },
    methods: {
      changeVal(item) {
        this.val = item;
        this.selShow = !this.selShow;
      }
    }
  }
  Vue.component("select-list", {
    template: `<ul class="modal-sel"><li v-for="item in list2" @click="selectVal(item)">{{item}}</li></ul>`,
    props: ['list2'],
    methods: {
      selectVal: function (item) {
        this.$emit("receive", item)
      }
    }
  })
</script>
